export const dragAnimate = (dom: HTMLElement) => {
  let relaX: number, relaY: number;
  dom.ondragstart = function (e: DragEvent) {
    relaX = e.offsetX;
    relaY = e.offsetY;
    dom.style.opacity = "1";
    dom.style.borderRadius = "5px";
  };
  dom.ondragover = function (e) {
    dom.style.opacity = "0";
    dom.style.borderRadius = "5px";
  };
  dom.ondragend = function (e) {
    dom.style.opacity = "1";
    const widnowWidth = window.innerWidth;
    const widnowHeight = window.innerHeight;
    const domToLeft = e.clientX + dom.offsetWidth;
    const domToTop = e.clientY + dom.offsetHeight;
    dom.style.borderRadius = "5px 0 0 5px";

    if (domToLeft > widnowWidth || e.clientX - dom.offsetWidth < 0) {
      dom.style.left = widnowWidth - dom.offsetWidth + "px";
    } else if (domToTop > widnowHeight || e.clientY - dom.offsetHeight < 0) {
      dom.style.top = widnowHeight - dom.offsetHeight + "px";
    } else {
      dom.style.left = widnowWidth - dom.offsetWidth + "px";
      dom.style.top = e.clientY - relaY + "px";
    }
  };
};
